<template>
  <div id="container" :style="{width: '1700px', height: '690px'}" />
</template>

<script>
import { queryAddressOfCustomer } from '@/api/system/echarts'

export default {
  data() {
    return {
      dataOfAddress: [],
      dataOfCustomer: [],
      dataOfSite: [],
      dataOfSum: []
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    // 设置async关键字，等待queryAddressOfCustomer()方法执行完成后，才能执行下面的代码
    async drawLine() {
      await queryAddressOfCustomer().then(res => {
        this.dataOfAddress = res.data.address
        this.dataOfCustomer = res.data.customer
        this.dataOfSite = res.data.site
        this.dataOfSum = res.data.sum
      })
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('container'))
      // 开始绘制图表并填上数据
      var option
      option = {
        title: {
          text: '柱状图/折线图合并测试'
        },
        color: ['#5470C6', '#91CC75', '#EE6666'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['客户数量', '站点数量', '总合计']
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            data: this.dataOfAddress,
            axisLabel: {
              interval: 0,
              rotate: 60,
              margin: 10
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '客户数量',
            min: 0,
            max: 100,
            position: 'right',
            axisLine: {
              show: true,
              lineStyle: {
                color: ['#5470C6']
              }
            },
            axisLabel: {
              formatter: '{value} 个'
            }
          },
          {
            type: 'value',
            name: '站点数量',
            min: 0,
            max: 150,
            position: 'right',
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: ['#91CC75']
              }
            },
            axisLabel: {
              formatter: '{value} 个'
            }
          },
          {
            type: 'value',
            name: '总合计',
            min: 0,
            max: 150,
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: ['#EE6666']
              }
            },
            axisLabel: {
              formatter: '{value} 个'
            }
          }
        ],
        series: [
          {
            name: '客户数量',
            type: 'bar',
            data: this.dataOfCustomer
          },
          {
            name: '站点数量',
            type: 'bar',
            yAxisIndex: 1,
            data: this.dataOfSite
          },
          {
            name: '总合计',
            type: 'line',
            yAxisIndex: 2,
            data: this.dataOfSum
          }
        ]
      }
      if (option && typeof option === 'object') {
        myChart.setOption(option, true)
      }
    }
  }
}
</script>

<style scoped="scoped">
  #container{
    padding-top: 25px;
  }
</style>
